<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spirit</title>

    <!-- 引入boostrapcss文件 -->
    <link rel="stylesheet" href="./css/bootstrap.min.css" />

    <!-- animation 动画库 -->
    <link rel="stylesheet" href="./css/animate.min.css" />

    <!-- 引入页面样式重置的css文件 -->
    <link rel="stylesheet" href="./css/reset.css" />

    <!-- 引入我们自己写的css样式文件 -->
    <link rel="stylesheet/less" href="./css/index.css" />
</head>

<body>
    <!-- 头部 -->
    <nav class="navbar navbar-inverse">
        <div class="container">
            <!-- logo -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand logo wow bounceInDown" href="#">Spirit</a>
            </div>

            <!-- 右侧结构 -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a class="wow bounceInDown" data-wow-delay="100ms" href="#banner">HOME</a></li>
                    <li><a class="wow bounceInDown" data-wow-delay="150ms" href="#about">About</a></li>
                    <li><a class="wow bounceInDown" data-wow-delay="200ms" href="#team">team</a></li>
                    <li><a class="wow bounceInDown" data-wow-delay="250ms" href="#work">work</a></li>
                    <li><a class="wow bounceInDown" data-wow-delay="300ms" href="#contact">CONTACT</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- banner -->
    <div id="banner" class="banner">
        <div class="title wow rubberBand" data-wow-delay="100ms">wELCOME on <span>spirit8</span></div>

        <div class="desc wow flipInY" data-wow-delay="140ms">
            We are a digital agency with
            <span>years of experience</span>
            and with
            <span>extraordinary people</span>
        </div>

        <a href="#contact" data-wow-delay="150ms" class="more wow lightSpeedIn">↓</a>
    </div>

    <!-- about -->
    <div id="about" class="about">
        <div class="container">
            <div class="left wow bounceInDown">
                <img src="./images/about_background.png" />
            </div>
            <div class="right">
                <div class="subject">
                    <div class="top wow bounceInDown" data-wow-delay="100ms">about us</div>
                    <div class="bottom wow bounceInDown" data-wow-delay="150ms">
                        <span>some</span>
                        words
                        <span>about us</span>
                    </div>
                </div>

                <p class="content wow bounceInDown" data-wow-delay="200ms">We love building and rebuilding brands
                    through our specific skills. Using colour, fonts, and illustration, we brand companies in a way they
                    will never forget.</p>

                <ul class="list">
                    <li class="wow bounceInDown" data-wow-delay="300ms">
                        <span class="glyphicon glyphicon-record" aria-hidden="true"></span>
                        <span>Mission - </span>
                        We deliver uniqueness and quality
                    </li>
                    <li class="wow bounceInDown" data-wow-delay="350ms">
                        <span class="glyphicon glyphicon-record" aria-hidden="true"></span>
                        <span>Mission - </span>
                        We deliver uniqueness and quality
                    </li>
                    <li class="wow bounceInDown" data-wow-delay="400ms">
                        <span class="glyphicon glyphicon-record" aria-hidden="true"></span>
                        <span>Mission - </span>
                        We deliver uniqueness and quality
                    </li>
                </ul>

                <div class="more wow bounceInDown" data-wow-delay="500ms">
                    <span class="glyphicon glyphicon-lock"></span>
                    <span>Browse our work</span>
                </div>
            </div>
        </div>
    </div>

    <!-- team -->
    <div id="team" class="team">
        <div class="container">
            <div class="subject wow bounceInDown">Meet <span>our team</span></div>

            <div class="list">
                <div class="item wow bounceInDown" data-wow-delay="100ms">
                    <div class="photo">
                        <img src="./images/cover.png" />
                    </div>
                    <div class="content">
                        <div class="name">Jason Statham</div>
                        <div class="job">Knife designer</div>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
                <div class="item wow bounceInDown" data-wow-delay="200ms">
                    <div class="photo">
                        <img src="./images/cover.png" />
                    </div>
                    <div class="content">
                        <div class="name">Jason Statham</div>
                        <div class="job">Knife designer</div>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
                <div class="item wow bounceInDown" data-wow-delay="300ms">
                    <div class="photo">
                        <img src="./images/cover.png" />
                    </div>
                    <div class="content">
                        <div class="name">Jason Statham</div>
                        <div class="job">Knife designer</div>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
                <div class="item wow bounceInDown" data-wow-delay="400ms">
                    <div class="photo">
                        <img src="./images/cover.png" />
                    </div>
                    <div class="content">
                        <div class="name">Jason Statham</div>
                        <div class="job">Knife designer</div>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
            </div>

            <div class="more">
                <span class="wow bounceInDown" data-wow-delay="100ms"></span>
                <span class="wow bounceInDown" data-wow-delay="200ms"></span>
                <span class="wow bounceInDown" data-wow-delay="300ms"></span>
            </div>
        </div>
    </div>

    <!-- service -->
    <div id="service" class="service">
        <div class="container">
            <div class="subject wow bounceInDown">take a look at <span>our services</span></div>
            <div class="desc wow bounceInDown" data-wow-delay="100ms">Lorem Ipsum comes from sections 1.10.32 and
                1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
                This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of
                Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
            <div class="list">
                <div class="item wow bounceInDown" data-wow-delay="100ms">
                    <div class="photo">
                        <img src="./images/spirit9.png" />
                    </div>
                    <div class="content">
                        <div class="name">WEB DESIGN</div>
                        <div class="desc">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a
                            line in section 1.10.32.
                        </div>
                    </div>
                </div>
                <div class="item wow bounceInDown" data-wow-delay="200ms">
                    <div class="photo">
                        <img src="./images/spirit8.png" />
                    </div>
                    <div class="content">
                        <div class="name">MOBILE APPS</div>
                        <div class="desc">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a
                            line in section 1.10.32.
                        </div>
                    </div>
                </div>
                <div class="item wow bounceInDown" data-wow-delay="300ms">
                    <div class="photo">
                        <img src="./images/spirit10.png" />
                    </div>
                    <div class="content">
                        <div class="name">PHOTOGRAPHY</div>
                        <div class="desc">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a
                            line in section 1.10.32.
                        </div>
                    </div>
                </div>
                <div class="item wow bounceInDown" data-wow-delay="400ms">
                    <div class="photo">
                        <img src="./images/spirit11.png" />
                    </div>
                    <div class="content">
                        <div class="name">MARKETING</div>
                        <div class="desc">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a
                            line in section 1.10.32.
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- client -->
    <div id="client" class="client">
        <div class="container">
            <div class="subject wow bounceInDown">SOME OF <span>OUR CILENTS</span></div>
            <div class="list">
                <div class="item wow bounceInDown" data-wow-delay="100ms">
                    <img src="./images/1.png" />
                </div>
                <div class="item wow bounceInDown" data-wow-delay="100ms">
                    <img src="./images/2.png" />
                </div>
                <div class="item wow bounceInDown" data-wow-delay="100ms">
                    <img src="./images/3.png" />
                </div>
                <div class="item wow bounceInDown" data-wow-delay="100ms">
                    <img src="./images/4.png" />
                </div>
                <div class="item wow bounceInDown" data-wow-delay="100ms">
                    <img src="./images/5.png" />
                </div>
            </div>
            <div class="more">
                <span class="wow bounceInDown" data-wow-delay="100ms"></span>
                <span class="wow bounceInDown" data-wow-delay="200ms"></span>
                <span class="wow bounceInDown" data-wow-delay="300ms"></span>
            </div>
        </div>
    </div>
    <!-- work -->
    <div id="work" class="work">
        <div class="container">
            <div class="subject wow bounceInDown">Meet <span>our team</span></div>

            <div class="desc wow bounceInDown" data-wow-delay="100ms">Lorem Ipsum comes from sections 1.10.32 and
                1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
                This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of
                Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>

            <div class="box">
                <div class="top">
                    <div class="left wow bounceInDown">Filter by type</div>
                    <div class="right">
                        <a class="wow bounceInDown" data-wow-delay="100ms" href="javascript:void(0)">All</a>
                        <a class="wow bounceInDown" data-wow-delay="200ms" href="javascript:void(0)">Web design</a>
                        <a class="wow bounceInDown" data-wow-delay="300ms" href="javascript:void(0)">Mobile design</a>
                        <a class="wow bounceInDown" data-wow-delay="400ms" href="javascript:void(0)">Photograpy</a>
                    </div>
                    <select class="option wow bounceInDown" name="option" data-wow-delay="200ms">
                        <option>All</option>
                        <option>Web design</option>
                        <option>Mobile design</option>
                        <option>Photograpy</option>
                    </select>
                </div>

                <div class="list">
                    <div class="item wow bounceInDown" data-wow-delay="100ms">
                        <img src="./images/work-img1.png" />
                        <div class="mask">
                            <div class="title">Trend and fashion</div>
                            <div class="short">Website design</div>
                            <div class="btns">+</div>
                        </div>
                    </div>
                    <div class="item wow bounceInDown" data-wow-delay="120ms">
                        <img src="./images/work-img1.png" />
                        <div class="mask">
                            <div class="title">Trend and fashion</div>
                            <div class="short">Website design</div>
                            <div class="btns">+</div>
                        </div>
                    </div>
                    <div class="item wow bounceInDown" data-wow-delay="140ms">
                        <img src="./images/work-img1.png" />
                        <div class="mask">
                            <div class="title">Trend and fashion</div>
                            <div class="short">Website design</div>
                            <div class="btns">+</div>
                        </div>
                    </div>
                    <div class="item wow bounceInDown" data-wow-delay="160ms">
                        <img src="./images/work-img1.png" />
                        <div class="mask">
                            <div class="title">Trend and fashion</div>
                            <div class="short">Website design</div>
                            <div class="btns">+</div>
                        </div>
                    </div>
                    <div class="item wow bounceInDown" data-wow-delay="180ms">
                        <img src="./images/work-img2.png" />
                        <div class="mask">
                            <div class="title">Trend and fashion</div>
                            <div class="short">Website design</div>
                            <div class="btns">+</div>
                        </div>
                    </div>
                    <div class="item wow bounceInDown" data-wow-delay="200ms">
                        <img src="./images/work-img2.png" />
                        <div class="mask">
                            <div class="title">Trend and fashion</div>
                            <div class="short">Website design</div>
                            <div class="btns">+</div>
                        </div>
                    </div>
                    <div class="item wow bounceInDown" data-wow-delay="220ms">
                        <img src="./images/work-img2.png" />
                        <div class="mask">
                            <div class="title">Trend and fashion</div>
                            <div class="short">Website design</div>
                            <div class="btns">+</div>
                        </div>
                    </div>
                    <div class="item wow bounceInDown" data-wow-delay="240ms">
                        <img src="./images/work-img2.png" />
                        <div class="mask">
                            <div class="title">Trend and fashion</div>
                            <div class="short">Website design</div>
                            <div class="btns">+</div>
                        </div>
                    </div>
                    <div class="item wow bounceInDown" data-wow-delay="260ms">
                        <img src="./images/work-img3.png" />
                        <div class="mask">
                            <div class="title">Trend and fashion</div>
                            <div class="short">Website design</div>
                            <div class="btns">+</div>
                        </div>
                    </div>
                    <div class="item wow bounceInDown" data-wow-delay="280ms">
                        <img src="./images/work-img3.png" />
                        <div class="mask">
                            <div class="title">Trend and fashion</div>
                            <div class="short">Website design</div>
                            <div class="btns">+</div>
                        </div>
                    </div>
                    <div class="item wow bounceInDown" data-wow-delay="300ms">
                        <img src="./images/work-img3.png" />
                        <div class="mask">
                            <div class="title">Trend and fashion</div>
                            <div class="short">Website design</div>
                            <div class="btns">+</div>
                        </div>
                    </div>
                    <div class="item wow bounceInDown" data-wow-delay="320ms">
                        <img src="./images/work-img3.png" />
                        <div class="mask">
                            <div class="title">Trend and fashion</div>
                            <div class="short">Website design</div>
                            <div class="btns">+</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- client -->
    <div id="testimonials" class="testimonials">
        <div class="container">
            <div class="subject wow bounceInDown">SOME OF <span>OUR CILENTS</span></div>
            <div class="desc">
                This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of
                Lorem Ipsum,
                "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
            </div>
            <div class="name">Dean Martin, CEO Acme Inc.</div>
            <div class="more">
                <span class="wow bounceInDown" data-wow-delay="100ms"></span>
                <span class="wow bounceInDown" data-wow-delay="200ms"></span>
                <span class="wow bounceInDown" data-wow-delay="300ms"></span>
            </div>
        </div>
    </div>





    <!-- contact -->
    <div id="contact" class="contact">
        <div class="container">
            <div class="subject wow bounceInDown">feel free to <span>contact us</span></div>

            <div class="desc wow bounceInDown" data-wow-delay="100ms">Lorem Ipsum comes from sections 1.10.32 and
                1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
                This book is a treatise on the theory of ethics, very popular during the Renaissance. </div>

            <form>
                <div class="box">
                    <div class="top">
                        <div class="item wow bounceInDown" data-wow-delay="100ms">
                            <div>Name <sup>*</sup></div>
                            <input type="text" name="username" placeholder="请输入昵称" required />
                        </div>
                        <div class="item wow bounceInDown" data-wow-delay="300ms">
                            <div>Email Address <sup>*</sup></div>
                            <input type="email" name="email" placeholder="请输入邮箱" required />
                        </div>
                    </div>
                    <div class="content wow bounceInDown" data-wow-delay="400ms">
                        <div>Message <sup>*</sup></div>
                        <textarea name="content" placeholder="请输入留言内容" rows="8" required></textarea>
                    </div>
                    <div class="action wow bounceInDown" data-wow-delay="450ms">
                        <button type="submit" class="send">Send</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- footer -->
    <footer class="footer">
        <div class="container">
            <p class="copyright wow bounceInDown">ALL RIGHTS RESERVED. COPYRIGHT © 2014 <span>SPIRIT8</span></p>

            <div class="list">
                <a class="wow bounceInDown" data-wow-delay="100ms" href="javascript:void(0)"><img
                        src="./images/footer1.png"></a>
                <a class="wow bounceInDown" data-wow-delay="200ms" href="javascript:void(0)"><img
                        src="./images/footer2.png"></a>
                <a class="wow bounceInDown" data-wow-delay="300ms" href="javascript:void(0)"><img
                        src="./images/footer3.png"></a>
                <a class="wow bounceInDown" data-wow-delay="400ms" href="javascript:void(0)"><img
                        src="./images/footer4.png"></a>
                <a class="wow bounceInDown" data-wow-delay="500ms" href="javascript:void(0)"><img
                        src="./images/footer5.png"></a>
            </div>
        </div>
    </footer>

    <!-- 返回顶部 -->
    <div class="backup">
        <a href="#banner" class="top">
            <img src="./images/top.svg" />
        </a>
    </div>

</body>

</html>
<!-- 引入jquery -->
<script src="./js/jquery.min.js"></script>

<!-- 引入bootstrap js文件  -->
<script src="./js/bootstrap.min.js"></script>

<!-- 引入less的编译器 -->
<script src="./js/less.min.js"></script>

<!-- 引入懒加载动画脚本 -->
<script src="./js/wow.min.js"></script>

<script>
    // 初始化这个插件
    new WOW().init()
</script>